import { merge, cloneDeep } from 'lodash-es'
//批量引入图标
const path = require('path')
const pngs = require.context('@/assets/imgs/map/', false, /point-.*\.png$/)
const dotPng = require('@/assets/imgs/map/dot-material.png')

const icons = {}
const pointList = []
pngs.keys().forEach((v) => {
  const name = path.basename(v, '.png')
  icons[name] = pngs(v).default || pngs(v)
  pointList.push({
    markerFile: icons[name],
    type: name
  })
})

export { icons }

const bubblePath =
  'M2149.9-222.279a32.159,32.159,0,0,0-32,32.315,32.448,32.448,0,0,0,2.051,11.3,32.357,32.357,0,0,0,7.165,11.378l.328.331,22.456,22.677,22.453-22.675.333-.337a32.335,32.335,0,0,0,7.163-11.374,32.448,32.448,0,0,0,2.051-11.3A32.159,32.159,0,0,0,2149.9-222.279Z'

// 主题变量
const primaryColor = '#00939D'
const textHaloFill = 'rgba(4,21,34,0.8)'
const textFill = 'rgba(251, 250, 255, 1)'
const textSize = 18
const textHaloRadius = 2
const bubble = {
  markerType: 'path',
  markerPath: [
    {
      path: bubblePath,
      transform: 'translate(-2117.397 222.779)',
      'stroke-width': 1
    }
  ],
  markerPathWidth: 65,
  markerPathHeight: 79.211,
  markerVerticalAlignment: 'middle'
}

const styles = {
  //带颜色的面的例子
  // redPolygon: {
  //   symbol: [
  //     {
  //       polygonFill: '#FC5A5A',
  //       polygonOpacity: 0.6,
  //       lineWidth: 2,
  //       lineColor: '#FC5A5A'
  //     },
  //     {
  //       ...getLabel('{cityName}{labelName}', { isHalo: false, isBold: false })
  //     }
  //   ]
  // },
  'map-material': {
    symbol: [
      {
        polygonFill: primaryColor,
        lineWidth: 0
      },
      {
        polygonPatternFile: dotPng,
        lineWidth: 0
      }
    ]
  },
  'map-bg': {
    symbol: [
      {
        shadowBlur: 20,
        shadowColor: '#1BB1BEFF',
        lineColor: '#1BB1BEFF',
        lineWidth: 2
      },
      {
        shadowBlur: 20,
        shadowColor: '#1BB1BEFF',
        lineColor: '#1BB1BEFF',
        lineWidth: 2
      },
      {
        shadowBlur: 4,
        shadowColor: '#1BB1BEFF',
        lineColor: '#1BB1BEFF',
        lineWidth: 2
      },
      {
        shadowBlur: 20,
        shadowColor: '#00FCFCFF',
        smoothness: 1,
        lineColor: '#00FCF9',
        lineWidth: 3,
        polygonFill: {
          type: 'radial',
          places: [0.5, 0.5, 0, 0.5, 0.5, 1], //[x0, y0, r0, x1, y1, r1]
          colorStops: [
            [0, '#00000000'],
            [0.8, '#00000000'],
            [0.9, '#00FCFCFF']
          ]
        }
      }
    ]
  },
  county: {
    symbol: [
      {
        polygonFill: '#0e0e3f', //'rgba(255,255,255,0.5)',
        polygonOpacity: 0.01,
        lineColor: 'rgba(255,255,255,0.5)',
        lineOpacity: 0.5,
        lineWidth: 3,
        ...getLabel('{cityName}{labelName}', { isHalo: false, isBold: true })
      }
    ]
  },
  countyText: {
    symbol: {
      ...getLabel('{cityName}', { isBold: true })
    }
  },
  shadowText: {
    symbol: {
      ...getLabel('{cityName}', { isHalo: false, isBold: true }),
      markerFill: 'transparent', //复制label后会有默认的marKer背景 需要手动清除
      markerLineWidth: 0
    }
  },
  countyOffset: {
    symbol: [
      {
        polygonFill: '#00121B', //'rgba(255,255,255,0.5)',
        polygonOpacity: 1,
        lineColor: '#FFF',
        lineOpacity: 0.8,
        lineWidth: 2
      }
    ]
  },
  countyOffsetBottom: {
    symbol: [
      {
        polygonFill: '#00121B', //'rgba(255,255,255,0.5)',
        polygonOpacity: 1,
        lineColor: '#FFF',
        lineOpacity: 0.6,
        lineWidth: 1
      }
    ]
  }
}
//中国地图背景色不一样
styles['china-map-bg'] = merge(cloneDeep(styles['map-bg']), {
  symbol: [
    {},
    {
      polygonFill: '#102E2C'
    }
  ]
})
//区县地图背景不需要径向发光
styles['county-map-bg'] = merge(cloneDeep(styles['map-bg']), {
  symbol: [
    {},
    {
      polygonFill: '#00000000'
    }
  ]
})

//初始化点图层样式
const pointOpt = {
  markerWidth: 32,
  markerHeight: 48
}
pointList.forEach((v) => {
  styles[v.type] = {
    symbol: {
      ...pointOpt,
      markerFile: v.markerFile
    }
  }
})
//覆盖原有的点位设置
//强降水报警

export default styles

/**
 * 获取通用的label样式
 * @param {*} textName 注记字段名
 * @param {*} {isHalo：是否描绘边缘，isBold:是否加粗}
 * @returns
 */
function getLabel(textName, { isHalo, isBold } = {}) {
  const halo = {
    textHaloFill,
    textHaloRadius
  }
  const label = {
    textName: textName,
    textSize,
    textFill
  }
  const bold = {
    textWeight: 'bold'
  }

  return {
    ...label,
    ...(isBold && { ...bold }),
    ...(isHalo && { ...halo })
  }
}
